import _ from 'lodash';
import { computed, Ref } from 'vue';

import { useWindowSizeFn } from '@/hooks/useWindowSizeFn';

export const useSearchEllipsis = (domRef: Ref, listRef: Ref, resizeMapData: any) => {
  const formList = computed(() => {
    return listRef.value.filter((item: any) => !item.hidden);
  });

  const popupList = computed(() => {
    const arr = _.cloneDeep(listRef.value);

    return arr
      .filter((item: any) => item.hidden)
      .map((item: any) => {
        item.hidden = false;
        return item;
      });
  });

  const hiddenFormList = (arr: string[]) => {
    listRef.value = listRef.value.map((item: any) => {
      item.hidden = arr.includes(item.key);
      return item;
    });
  };

  const handleResize = () => {
    const boundingClientRect = domRef.value.getBoundingClientRect();
    const hiddenList =
      resizeMapData[
        Object.keys(resizeMapData)
          .map((item) => Number(item))
          .sort((a: number, b: number) => a - b)
          .find((item: any) => item >= boundingClientRect?.width)
      ] || [];

    hiddenFormList(hiddenList);
  };

  useWindowSizeFn<void>(handleResize, { immediate: true }, 100);

  return { formList, popupList };
};
